<script>
import '@/assets/vconsole.min.js';
var vConsole = new VConsole();
export default {
    props: {
        // 配置只显示播放按钮
        onlyShowPlay: { 
            default: false,
            type: Boolean
        },
        isAutoPlay:{
            default: false,
            type: Boolean
        }
    },
    data() {
        return {
            time: '00:00',
            duration: '00:00',
            progressStyle: { width: '' },
            dotStyle: { left: '' },
            isMute: false,
            hasAudio: false,
            isPlay: false
        };
    },
    mounted(){
        let hasAudio = !!this.$refs.recordAudio.canPlayType;
        if(hasAudio) {
            this.hasAudio = true;
        }else {
            this.hasAudio = false;
        }

        if(this.isAutoPlay){
            this.audioAutoPlay();
        }
    },
    computed: {
        audioUrl(){
            return require('@/assets/myAudio.mp3');
        }
    },
    methods: {
        preload() {
            let recordAudio = this.$refs.recordAudio;
            recordAudio.load();
        },
        // 播放暂停控制
        playAudio() {
            let recordAudio = this.$refs.recordAudio;
            if (recordAudio.paused) {
                recordAudio.play();
                this.isPlay = true;
            } else {
                recordAudio.pause();
                this.isPlay = false;
            }
        },
        // 自动播放
        audioAutoPlay() {
            let audio = this.$refs.recordAudio,
                play = function() {  
                    audio.play();  
                    document.removeEventListener("touchstart",play, false);  
                };  
            
            document.addEventListener("WeixinJSBridgeReady", function () {  
                play();  
            }, false);  
            document.addEventListener('YixinJSBridgeReady', function() {  
                play();  
            }, false);  
            document.addEventListener("touchstart",play, false);  
            document.addEventListener('click', play);
        },
        // 进度条更新
        timeUpdate() {
            this.duration = this.transTime(this.$refs.recordAudio.duration);
            let timeStr = parseInt(this.$refs.recordAudio.currentTime, 10);
            this.time = this.transTime(timeStr);
            let scales = this.$refs.recordAudio.currentTime / this.$refs.recordAudio.duration;
            this.progressStyle.width = scales * 100 + '%';
            this.dotStyle.left = scales * 100 + '%';
        },
        // 播放结束
        onEnded() {
        // 播放结束回到初始状态
        /*
          this.time = "00:00";
          this.progressStyle.width = 0;
          this.dotStyle.left = 0;
          */
        },

        canPlay() {
        // 获取audio音频文件总时长 并设置到界面并解决出现 NAN 的问题
            this.duration = this.transTime(this.$refs.recordAudio.duration);
        },

        // 静音控制
        listenAudio() {
            let audio = this.$refs.recordAudio;
            if (audio.muted) {
                audio.muted = false;
                this.isMute = false;
            } else {
                audio.muted = true;
                this.isMute = true;
            }
        },

        // 鼠标点击移动播放进度
        controlAudioProgress(event) {
            let audio = this.$refs.recordAudio;
            let auidioProgress = this.$refs.auidioProgress;
            if (!audio.paused || audio.currentTime !== 0) {
                let pgsWidth = parseInt(window.getComputedStyle(auidioProgress, null).width.replace('px', ''), 10);
                let rate = event.offsetX / pgsWidth;
                audio.currentTime = audio.duration * rate;
                this.timeUpdate();
            }
        },

        // 下载音频
        downloadCallRecord() {
            // console.log("下载...");
        },

        // 时间转换
        transTime(value) {
            let time = '';
            let h = parseInt(value / 3600, 10);
            value %= 3600;
            let m = parseInt(value / 60, 10);
            let s = parseInt(value % 60, 10);
            if (h > 0) {
                time = this.formatTime(h + ':' + m + ':' + s);
            } else {
                time = this.formatTime(m + ':' + s);
            }
            return time;
        },

        // 时间格式化
        formatTime(value) {
            let time = '';
            let s = value.split(':');
            let i = 0;
            for (; i < s.length - 1; i++) {
                time += s[i].length === 1 ? ('0' + s[i]) : s[i];
                time += ':';
            }
            time += s[i].length === 1 ? ('0' + s[i]) : s[i];
            return time;
        },
        duratiοnChange(){
            let audio = this.$refs.recordAudio;
            this.duration = this.transTime(audio.duration);
        }
    }
};
</script>
<template>
<section>
  <div class="audioWrap" v-if="hasAudio" :class="{audioOnlyPlay: onlyShowPlay}">
    <div class="audioOperL">
        <span  class="audioPlay" :class="{'playing': isPlay}" title="播控" @click.stop="playAudio"></span>
    </div>
    <div class="auidioProgressWrap" v-if="!onlyShowPlay">
        <div class="auidioTime">{{time}}</div>
        <div class="auidioProgress" ref="auidioProgress" @mousedown.stop="controlAudioProgress($event)">
            <span class="progressDot" :style="dotStyle"></span>
            <span class="bar" :style="progressStyle"></span>
        </div>
        <div class="auidioDuration">{{duration}}</div>
    </div>
    <div class="audioOperaR"  v-if="!onlyShowPlay">
        <span class="auidioListen" :class="{'mute': isMute}" title="静音" @click.stop ="listenAudio">♬</span>
        <!-- <span class="auidioDownload" title="下载" @click="downloadCallRecord">下载</span> -->
    </div>
  </div>
    <audio ref="recordAudio" @canplay="canPlay" @timeupdate="timeUpdate" @ended="onEnded" @duratiοnchange="duratiοnChange" controls>
        <source src="@/assets/myAudio.mp3" type="audio/mp3">
        您的浏览器不支持 audio 元素。
    </audio>
</section>
</template>
<style scoped>
.audioWrap {
	width: 400px;
	height:50px;
    display: flex;
	line-height:49px;
	background:rgba(255,255,255,1);
	box-shadow:0px 5px 30px 0px rgba(29,34,54,0.18);
	border-radius:6px;
    box-sizing: border-box;
    justify-content: center;
    align-content: center;
}
.audioOnlyPlay {
    width: 50px;
}
.audioOnlyPlay .audioOperL {
    padding-left: 0;
}
.audioOperL {
    padding-left: 15px;
}
.audioOperaR {
    padding-right: 15px;
}
.audioPlay {
	display:inline-block;
	position:relative;
	top:6px;
	cursor:pointer;
	width:23px;
	height:23px;
	border-radius:50%;
	border:1px solid rgba(64,158,255,1)
}
.audioPlay:before {
	position:absolute;
	width:0;
	height:0;
	content:'';
	left:9px;
	top:6px;
	border-top:6px solid transparent;
	border-right:0 solid transparent;
	border-bottom:6px solid transparent;
	border-left:9px solid rgba(64,158,255,1)
}
.playing:before {
	position:absolute;
	width:9px;
	height:9px;
	content:'';
	top:7px;
	left:7px;
	background:rgba(64,158,255,1);
    border:none;
}
/* .audioOnlyPlay .audioPlay {
    width: 32px;
    height:32px;
    top: 9px;
    border:none;
    background: #fff url() no-repeat center center;
    background-size: contain;
}
.audioOnlyPlay .playing {
    background-image: url();
}
.audioOnlyPlay .audioPlay:before {
   display: none;
}
.audioOnlyPlay .playing:before {
  display: none;
} */
.auidioProgressWrap {
    display: flex;
    flex: 1;
}
.auidioTime {
    display:inline-block;
    width: 50px;
	font-size:11px;
    text-align: center;
	color:rgba(51,51,51,1)
}
.auidioProgress {
    flex: 1;
	height:2px;
	background:rgba(64,158,255,.3);
	border-radius:1px;
	position:relative;
	top:23px;
}
.progressDot {
	width:8px;
	height:8px;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	background-color:rgba(64,158,255,1);
	position:absolute;
	left:0;
	top:50%;
	margin-top:-4px;
	margin-left:-5px;
	cursor:pointer
}
.bar {
	height:100%;
	background:rgba(64,158,255,1);
	border-radius:3px;
	display:inline-block;
	position:absolute;
    left: 0;
}
.auidioDuration {
    width: 50px;
	font-size:11px;
	text-align: center;
	color:rgba(34,34,34,1)
}
.auidioListen,.auidioDownload {
	width:16px;
	height:13px;
	cursor:pointer;
	color:rgba(64,158,255,1)
}

.auidioListen.mute {
	text-decoration:line-through
}
.auidioDownload {
    font-size: 12px;
	margin-left:10px;
}
</style>
